<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSora2 - AI视频生成应用 | 演示展示</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
          Helvetica, Arial, sans-serif;
        background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
        color: #fff;
        line-height: 1.6;
        min-height: 100vh;
      }

      /* 导航栏 */
      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(26, 26, 46, 0.95);
        backdrop-filter: blur(20px);
        padding: 20px 0;
        z-index: 1000;
        border-bottom: 1px solid rgba(139, 92, 246, 0.2);
      }

      .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: bold;
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .logo-icon {
        font-size: 32px;
        filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
      }

      .nav-buttons {
        display: flex;
        gap: 15px;
      }

      .btn {
        padding: 10px 24px;
        border-radius: 25px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s;
        border: none;
        cursor: pointer;
      }

      .btn-primary {
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        color: #fff;
      }

      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
      }

      .btn-outline {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border: 1px solid rgba(139, 92, 246, 0.3);
      }

      .btn-outline:hover {
        background: rgba(139, 92, 246, 0.1);
        border-color: #8b5cf6;
      }

      /* 主内容区 */
      .main-content {
        margin-top: 80px;
        padding: 40px 20px;
      }

      .container {
        max-width: 1400px;
        margin: 0 auto;
      }

      /* 头部介绍 */
      .hero {
        text-align: center;
        padding: 60px 20px;
        margin-bottom: 40px;
      }

      .hero h1 {
        font-size: 48px;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .hero p {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 15px;
      }

      .features {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 30px;
        flex-wrap: wrap;
      }

      .feature-badge {
        padding: 10px 20px;
        background: rgba(139, 92, 246, 0.1);
        border: 1px solid rgba(139, 92, 246, 0.3);
        border-radius: 20px;
        font-size: 14px;
        color: #8b5cf6;
      }

      /* 演示区域 */
      .demo-section {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 40px;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .demo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .demo-title {
        font-size: 24px;
        font-weight: bold;
      }

      .demo-tabs {
        display: flex;
        gap: 10px;
      }

      .demo-tab {
        padding: 8px 20px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
      }

      .demo-tab.active {
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        border-color: transparent;
      }

      .demo-tab:hover:not(.active) {
        background: rgba(139, 92, 246, 0.1);
        border-color: #8b5cf6;
      }

      /* iframe 容器 */
      .iframe-container {
        position: relative;
        width: 100%;
        background: #000;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      }

      /* 桌面视图 */
      .desktop-view {
        padding-top: 56.25%; /* 16:9 */
      }

      /* 手机视图 */
      .mobile-view {
        max-width: 375px;
        margin: 0 auto;
        padding-top: 177.78%; /* 9:16 */
      }

      .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
      }

      /* 设备边框装饰 */
      .device-frame {
        position: relative;
        max-width: 375px;
        margin: 0 auto;
      }

      .device-frame::before {
        content: "";
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 6px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        z-index: 10;
      }

      /* 功能特色卡片 */
      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin: 40px 0;
      }

      .feature-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 15px;
        padding: 30px;
        transition: all 0.3s;
      }

      .feature-card:hover {
        background: rgba(139, 92, 246, 0.05);
        border-color: rgba(139, 92, 246, 0.3);
        transform: translateY(-5px);
      }

      .feature-icon {
        font-size: 40px;
        margin-bottom: 15px;
      }

      .feature-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #8b5cf6;
      }

      .feature-desc {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        line-height: 1.6;
      }

      /* 统计数据 */
      .stats {
        display: flex;
        justify-content: space-around;
        gap: 20px;
        margin: 40px 0;
        flex-wrap: wrap;
      }

      .stat-item {
        text-align: center;
        padding: 30px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        flex: 1;
        min-width: 200px;
      }

      .stat-number {
        font-size: 48px;
        font-weight: bold;
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 10px;
      }

      .stat-label {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
      }

      /* 联系卡片 */
      .contact-card {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
        border-radius: 20px;
        padding: 40px;
        text-align: center;
        margin: 40px 0;
        position: relative;
        overflow: hidden;
      }

      .contact-card::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.1) 0%,
          transparent 70%
        );
        animation: rotate 10s linear infinite;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .contact-content {
        position: relative;
        z-index: 1;
      }

      .contact-title {
        font-size: 32px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 15px;
      }

      .contact-desc {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 20px;
      }

      .qq-number {
        font-size: 36px;
        font-weight: bold;
        color: #fff;
        margin: 20px 0;
        letter-spacing: 2px;
      }

      .contact-services {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
        flex-wrap: wrap;
      }

      .service-badge {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 15px;
        font-size: 14px;
        color: #fff;
      }

      /* 页脚 */
      .footer {
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        margin-top: 60px;
      }

      /* 响应式 */
      @media (max-width: 768px) {
        .hero h1 {
          font-size: 32px;
        }

        .hero p {
          font-size: 16px;
        }

        .demo-tabs {
          flex-direction: column;
        }

        .features-grid {
          grid-template-columns: 1fr;
        }

        .nav-buttons {
          flex-direction: column;
          gap: 10px;
        }

        .btn {
          width: 100%;
          text-align: center;
        }
      }

      /* 加载动画 */
      .loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
      }

      .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(139, 92, 246, 0.2);
        border-top-color: #8b5cf6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .loading-text {
        margin-top: 20px;
        color: rgba(255, 255, 255, 0.7);
      }
    </style>
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-container">
        <div class="logo">
          <span class="logo-icon">🎬</span>
          <span>CSora2</span>
        </div>
        <div class="nav-buttons">
          <a
            href="https://csora.hefeiruanyun.com/#/pages/sora/index"
            target="_blank"
            class="btn btn-outline"
            >在线体验</a
          >
          <a
            href="http://wpa.qq.com/msgrd?v=3&uin=2272723604&site=qq&menu=yes"
            target="_blank"
            class="btn btn-primary"
            >获取源码</a
          >
        </div>
      </div>
    </nav>

    <!-- 主内容 -->
    <div class="main-content">
      <div class="container">
        <!-- 头部介绍 -->
        <div class="hero">
          <h1>🎬 CSora2 AI视频生成应用</h1>
          <p>基于 Sora API 的专业 AI 视频创作平台</p>
          <p style="font-size: 16px; color: rgba(255, 255, 255, 0.6)">
            支持 Sora-2-Pro 高清模式 | 15秒视频 | 1024×1792 超清
          </p>
          <div class="features">
            <span class="feature-badge">🎥 高清模式</span>
            <span class="feature-badge">⏱️ 15秒视频</span>
            <span class="feature-badge">📱 多端运行</span>
            <span class="feature-badge">🎨 黑色炫酷</span>
          </div>
        </div>

        <!-- 统计数据 -->
        <div class="stats">
          <div class="stat-item">
            <div class="stat-number">2</div>
            <div class="stat-label">视频模式</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">15s</div>
            <div class="stat-label">最长时长</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">1792p</div>
            <div class="stat-label">超清画质</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">3</div>
            <div class="stat-label">核心页面</div>
          </div>
        </div>

        <!-- 演示区域 -->
        <div class="demo-section">
          <div class="demo-header">
            <h2 class="demo-title">📱 在线演示</h2>
            <div class="demo-tabs">
              <div class="demo-tab active" onclick="switchView('desktop')">
                桌面视图
              </div>
              <div class="demo-tab" onclick="switchView('mobile')">
                手机视图
              </div>
            </div>
          </div>

          <div id="demoContainer">
            <div class="iframe-container desktop-view">
              <div class="loading" id="loading">
                <div class="spinner"></div>
                <div class="loading-text">加载中...</div>
              </div>
              <iframe
                id="demoFrame"
                src="https://csora.hefeiruanyun.com/#/pages/sora/index"
                frameborder="0"
                allowfullscreen
                onload="hideLoading()"
              ></iframe>
            </div>
          </div>

          <p
            style="
              text-align: center;
              margin-top: 20px;
              color: rgba(255, 255, 255, 0.6);
              font-size: 14px;
            "
          >
            💡 提示：点击上方切换桌面/手机视图，可以直接在演示框内操作体验
          </p>
        </div>

        <!-- 应用截图 -->
        <h2 style="text-align: center; font-size: 32px; margin: 60px 0 40px">
          📱 应用截图
        </h2>
        <div
          style="
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 60px;
          "
        >
          <div
            style="
              background: rgba(255, 255, 255, 0.03);
              border-radius: 15px;
              padding: 20px;
              border: 1px solid rgba(255, 255, 255, 0.05);
              text-align: center;
            "
          >
            <img
              src="https://mp-ad70ccbd-9861-482d-9c60-4440a0b62e52.cdn.bspapp.com/微信图片_20251014102328_260_87.jpg"
              style="width: 100%; border-radius: 10px; margin-bottom: 15px"
              alt="首页 - 创作界面"
            />
            <h4 style="color: #8b5cf6; margin: 10px 0">首页 - 创作界面</h4>
            <p style="color: rgba(255, 255, 255, 0.6); font-size: 14px">
              输入描述词，选择模型和参数，开始创作
            </p>
          </div>
          <div
            style="
              background: rgba(255, 255, 255, 0.03);
              border-radius: 15px;
              padding: 20px;
              border: 1px solid rgba(255, 255, 255, 0.05);
              text-align: center;
            "
          >
            <img
              src="https://mp-ad70ccbd-9861-482d-9c60-4440a0b62e52.cdn.bspapp.com/微信图片_20251014102329_261_87.jpg"
              style="width: 100%; border-radius: 10px; margin-bottom: 15px"
              alt="列表页 - 作品管理"
            />
            <h4 style="color: #8b5cf6; margin: 10px 0">列表页 - 作品管理</h4>
            <p style="color: rgba(255, 255, 255, 0.6); font-size: 14px">
              查看所有作品，状态筛选，批量操作
            </p>
          </div>
          <div
            style="
              background: rgba(255, 255, 255, 0.03);
              border-radius: 15px;
              padding: 20px;
              border: 1px solid rgba(255, 255, 255, 0.05);
              text-align: center;
            "
          >
            <img
              src="https://mp-ad70ccbd-9861-482d-9c60-4440a0b62e52.cdn.bspapp.com/微信图片_20251014102330_262_87.jpg"
              style="width: 100%; border-radius: 10px; margin-bottom: 15px"
              alt="详情页 - 视频播放"
            />
            <h4 style="color: #8b5cf6; margin: 10px 0">详情页 - 视频播放</h4>
            <p style="color: rgba(255, 255, 255, 0.6); font-size: 14px">
              在线播放，下载分享，查看详情
            </p>
          </div>
          <div
            style="
              background: rgba(255, 255, 255, 0.03);
              border-radius: 15px;
              padding: 20px;
              border: 1px solid rgba(255, 255, 255, 0.05);
              text-align: center;
            "
          >
            <img
              src="https://mp-ad70ccbd-9861-482d-9c60-4440a0b62e52.cdn.bspapp.com/微信图片_20251014102331_263_87.jpg"
              style="width: 100%; border-radius: 10px; margin-bottom: 15px"
              alt="生成设置 - 参数配置"
            />
            <h4 style="color: #8b5cf6; margin: 10px 0">生成设置 - 参数配置</h4>
            <p style="color: rgba(255, 255, 255, 0.6); font-size: 14px">
              双模式选择，横竖屏切换，时长自定义
            </p>
          </div>
        </div>

        <!-- 功能特色 -->
        <h2 style="text-align: center; font-size: 32px; margin: 60px 0 40px">
          ✨ 核心功能
        </h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">🎥</div>
            <h3 class="feature-title">双模式支持</h3>
            <p class="feature-desc">
              标准模式 (sora-2) 和高清模式 (sora-2-pro)，720×1280 到 1024×1792
              超清画质可选
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">⏱️</div>
            <h3 class="feature-title">时长自定义</h3>
            <p class="feature-desc">
              Pro 高清模式支持 10秒/15秒 视频时长选择，满足不同场景需求
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">📐</div>
            <h3 class="feature-title">横竖屏切换</h3>
            <p class="feature-desc">
              支持竖屏和横屏两种方向，适配手机短视频和电脑宽屏播放
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🖼️</div>
            <h3 class="feature-title">参考图片</h3>
            <p class="feature-desc">
              支持上传最多 3 张参考图片，提升 AI 生成视频的精准度和风格控制
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">💡</div>
            <h3 class="feature-title">快速模板</h3>
            <p class="feature-desc">
              内置 6 个精选提示词模板，日落海景、雪山风光、城市夜景等一键使用
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">📊</div>
            <h3 class="feature-title">作品管理</h3>
            <p class="feature-desc">
              完整的列表管理、状态筛选、下拉刷新、上拉加载，轻松管理你的作品
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🎬</div>
            <h3 class="feature-title">在线播放</h3>
            <p class="feature-desc">
              支持全屏播放、进度控制、视频下载、作品分享等完整播放功能
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <h3 class="feature-title">实时轮询</h3>
            <p class="feature-desc">
              智能状态轮询机制，实时同步生成进度，30-120秒完成视频创作
            </p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">💎</div>
            <h3 class="feature-title">积分系统</h3>
            <p class="feature-desc">
              灵活的积分消费机制，标准模式 20 积分，高清模式 100 积分
            </p>
          </div>
        </div>

        <!-- 联系卡片 -->
        <div class="contact-card">
          <div class="contact-content">
            <h2 class="contact-title">📦 获取完整开源版本</h2>
            <p class="contact-desc">如需完整源码，请联系作者</p>
            <div class="qq-number">QQ: 2272723604</div>
            <div class="contact-services">
              <span class="service-badge">💾 完整源码</span>
              <span class="service-badge">🛠️ 技术支持</span>
              <span class="service-badge">📝 商业授权</span>
              <span class="service-badge">📚 部署培训</span>
            </div>
            <div style="margin-top: 30px">
              <a
                href="http://wpa.qq.com/msgrd?v=3&uin=2272723604&site=qq&menu=yes"
                target="_blank"
                class="btn btn-primary"
                style="
                  display: inline-block;
                  padding: 12px 40px;
                  font-size: 16px;
                "
                >立即联系</a
              >
            </div>
          </div>
        </div>

        <!-- 技术栈 -->
        <h2 style="text-align: center; font-size: 32px; margin: 60px 0 40px">
          🛠️ 技术栈
        </h2>
        <div
          style="
            background: rgba(255, 255, 255, 0.03);
            border-radius: 15px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.05);
          "
        >
          <div
            style="
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              gap: 20px;
            "
          >
            <div style="padding: 20px">
              <h3 style="color: #8b5cf6; margin-bottom: 15px">前端技术</h3>
              <ul
                style="
                  list-style: none;
                  color: rgba(255, 255, 255, 0.7);
                  line-height: 2;
                "
              >
                <li>✅ uniapp + Vue 2</li>
                <li>✅ 黑色炫酷风格</li>
                <li>✅ FontAwesome 4.7</li>
                <li>✅ CSS3 动画</li>
              </ul>
            </div>
            <div style="padding: 20px">
              <h3 style="color: #8b5cf6; margin-bottom: 15px">后端技术</h3>
              <ul
                style="
                  list-style: none;
                  color: rgba(255, 255, 255, 0.7);
                  line-height: 2;
                "
              >
                <li>✅ uniCloud 云开发</li>
                <li>✅ vk-unicloud 框架</li>
                <li>✅ 云数据库</li>
                <li>✅ 路由模式云函数</li>
              </ul>
            </div>
            <div style="padding: 20px">
              <h3 style="color: #8b5cf6; margin-bottom: 15px">核心特性</h3>
              <ul
                style="
                  list-style: none;
                  color: rgba(255, 255, 255, 0.7);
                  line-height: 2;
                "
              >
                <li>✅ 前后端一体化</li>
                <li>✅ 多端运行</li>
                <li>✅ 智能轮询</li>
                <li>✅ 积分系统</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <p>© 2025 CSora2 - AI视频生成应用 | Made with ❤️ by ChenChen</p>
      <p style="margin-top: 10px">
        <a
          href="https://csora.hefeiruanyun.com/#/pages/sora/index"
          target="_blank"
          style="color: #8b5cf6; text-decoration: none"
          >在线演示</a
        >
        |
        <a
          href="http://wpa.qq.com/msgrd?v=3&uin=2272723604&site=qq&menu=yes"
          target="_blank"
          style="color: #8b5cf6; text-decoration: none"
          >联系作者</a
        >
      </p>
    </footer>

    <script>
      // 隐藏加载动画
      function hideLoading() {
        setTimeout(() => {
          document.getElementById("loading").style.display = "none";
        }, 1000);
      }

      // 切换视图
      function switchView(view) {
        const container = document.getElementById("demoContainer");
        const tabs = document.querySelectorAll(".demo-tab");

        // 更新标签状态
        tabs.forEach((tab) => tab.classList.remove("active"));
        event.target.classList.add("active");

        // 切换视图
        if (view === "desktop") {
          container.innerHTML = `
                    <div class="iframe-container desktop-view">
                        <iframe 
                            src="https://csora.hefeiruanyun.com/#/pages/sora/index" 
                            frameborder="0"
                            allowfullscreen
                        ></iframe>
                    </div>
                `;
        } else {
          container.innerHTML = `
                    <div class="device-frame">
                        <div class="iframe-container mobile-view">
                            <iframe 
                                src="https://csora.hefeiruanyun.com/#/pages/sora/index" 
                                frameborder="0"
                                allowfullscreen
                            ></iframe>
                        </div>
                    </div>
                `;
        }
      }

      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
          e.preventDefault();
          const target = document.querySelector(this.getAttribute("href"));
          if (target) {
            target.scrollIntoView({
              behavior: "smooth",
            });
          }
        });
      });
    </script>
  </body>
</html>
